<template>
  <div class="goods_license">
    <el-form class="boss-form" inline ref="form" label-width="80px">
      <el-form-item label="商品名称">
        <el-input class="boss_input" v-model="licenseData.search.goodsName" placeholder="请输入商品名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="供应商">
        <el-select v-model="licenseData.search.supplierId" placeholder="请选择供应商" clearable filterable>
          <el-option v-for="item in licenseData.supplierList" :key="item.supplierId" :label="item.supplierName" :value="item.supplierId"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="证件类型">
        <el-select v-model="licenseData.search.qualificationType" placeholder="请选择证件类型" clearable filterable>
          <el-option v-for="item in consts.SearchGoodsQualicationType" :key="item.qualificationType" :label="item.title" :value="item.qualificationType"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="有效期" clearable>
        <el-select v-model="licenseData.search.expFlag" placeholder="请选择" clearable filterable>
          <el-option v-for="item in consts.ExpFlag" :key="item.status" :label="item.title" :value="item.status"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <Button label="重置" @click="onResetClick" />
        <Button label="搜索" type="primary" @click="onSearchClick" />
      </el-form-item>
    </el-form>

    <div class="outerTable">
      <el-table ref="tableRef" :data="licenseData.list" :height="tableHeight" v-loading="loading">
        <el-table-column fixed="left" type="index" label="#" width="50" />

        <el-table-column prop="goodsName" label="商品名称" />
        <el-table-column prop="supplierName" label="供应商" />
        <el-table-column prop="goodsQualificationType" label="证件类型" :formatter="(row, column, cellValue, index) => $formater.formaterGoodsQualificationType(cellValue)" />
        <el-table-column prop="qualificationImg" label="证件图">
          <template #default="scope">
            <img class="img" :src="scope.row.qualificationImg" @click="onShowImgClick(scope.row.qualificationImg)" />
          </template>
        </el-table-column>
        <el-table-column prop="effectiveDate" label="生效日期" />
        <el-table-column prop="expiredDate" label="到期日期" />
        <el-table-column prop="expFlag" label="有效期" :formatter="(row, column, cellValue, index) => $formater.formaterExpFlag(cellValue)" />

        <el-table-column fixed="right" label="操作" width="100">
          <template #default="scope">
            <span v-if="scope.row.goodsStatus === 'PUTOFF'">已下架</span>
            <span v-else>
              <Link v-if="authority.downGoods" label="下架商品" @click="onPutOFFGoodsClick(scope.row)" :underline="false"/>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <Pager :page="licenseData.search.page" :pageSizes="licenseData.search.pageSizes" :total="licenseData.total" :limit="licenseData.search.limit" @current-change="onCurrentChange" @size-change="onSizeChange" />
    </div>
  </div>

  <el-image-viewer ref="previewViewer" v-if="showImageViewer" @close="closeImgView" :url-list="srcList" />
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '@/api'
import formater from '@/formater'
import consts from '@/consts'
import { menuStore } from '@/store/menu.js'
import { calcTableHeight } from '@/assets/js/utils.js'
import Pager from '@/components/pager/index.vue'
import Link from '@/components/button/link.vue'
import Button from '@/components/button/button.vue'

const { tableRef, tableHeight } = calcTableHeight()

const router = useRouter()
const _menuStore = menuStore()

const licenseData = reactive({
  total: 0,
  supplierList: [],
  list: [],
  search: {
    page: 1,
    limit: consts.Limit,
    pageSizes: consts.PageSize,
    goodsName: '',
    supplierId: '',
    qualificationType: '',
    expFlag: ''
  }
})

const srcList = ref([])
const previewViewer = ref()
const showImageViewer = ref(false)

const loading = ref(false)

const authority = reactive({
  downGoods: false
})

const putOffGoods = async (goodsId) => {
  let { err } = await api.post(`medinstrument/boss/goods/PutOffGoods?goodsId=${goodsId}`)
  if (err) {
    ElMessage.error(err)
  } else {
    ElMessage.success('商品下架成功')
    loadData()
  }
}

const supplierData = async () => {
  let { data, err } = await api.get('/medinstrument/boss/supplier/allSupplierList')
  if (err) {
    ElMessage.error(err)
  } else {
    licenseData.supplierList = data.list
  }
}

const loadData = async () => {
  loading.value = true
  let params = Object.assign({}, licenseData.search)

  let { data, err } = await api.get('/medinstrument/boss/goods/getGoodsQualificationList', params)
  loading.value = false
  if (err) {
    ElMessage.error(err)
  } else {
    licenseData.list = data.goodsQualificationList
    licenseData.total = data.count
  }
}

const onPutOFFGoodsClick = (row) => {
  putOffGoods(row.goodsId)
}

const onResetClick = () => {
  licenseData.search = {}
  loadData()
}
const onSearchClick = () => {
  licenseData.search.page = 1
  loadData()
}

const onCurrentChange = (val) => {
  licenseData.search.page = val
  loadData()
}

const onSizeChange = (val) => {
  licenseData.search.limit = val
  loadData()
}

const onShowImgClick = (url) => {
  srcList.value = [url]
  showImageViewer.value = true
}

const closeImgView = () => {
  showImageViewer.value = false
}

onMounted(() => {
  loadData()
  supplierData()

  authority.downGoods = !!_menuStore.hasAuthorize('/medinstrument/boss/goods/PutOffGoods')
})
</script>
<style scoped>
.el-form {
  margin-top: 10px;
}

.img {
  width: 72px;
  height: 72px;
  cursor: pointer;
}
</style>
